<template lang="pug">
  .container
    .tab-container
      ul.float-left
        li(v-for="(item, index) in tabs" @click="tab(index)" :class="index == num ? 'activeNav' : ''") {{item}}
      .tabCon.float-left
        .containBox(v-for="(itemCon, index) in tabContents" v-show="index == num")          
          img(:src="'/img/' + itemCon.imgUrl")
          .weui-flex
            .weui-flex__item.textCenter —— 果味 ——  
          .weui-flex    	
            .weui-flex__item
              .placeholder.box-container
                ul
                  .href(v-for='(item, index) in allProducts[num]' :to='item.href' :key='index' @click="focusProduct(item.id)")      
                    img(:src="item.imgUrl")
                    p {{item.info.name}}&nbsp;{{item.info.weight}}
                

</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      tabs: ["果味", "蔬菜", "点心", "炒货", "粗茶", "淡饭"],
      tabContents: [{
        "imgUrl": "category-dryfruit.png",
      }, {
        "imgUrl": "category-dryfruit.png"
      }, {
        "imgUrl": "category-dryfruit.png"
      }, {
        "imgUrl": "category-dryfruit.png"
      }, {
        "imgUrl": "category-dryfruit.png"
      }, {
        "imgUrl": "category-dryfruit.png"
      }],
      num: 0
    }
  },
  computed: {
    ...mapState([
      'allProducts'
    ])
  },
  mounted() {

  },
  methods: {
    tab(index) {
      this.num = index;
    },
    focusProduct(id){
			this.$router.push({path: '/deal', query: {id: id}})
		}
  },
  beforeCreate() {
    this.$store.dispatch('getAllProducts')
  }

}
</script>
<style scoped lang="sass">
.box-container
	> ul
		width: 100%
		.href
			margin: 0% 0% 1% 1.6%
			width: 31%
			height: 100px
			display: inline
			// background-color: #F5F6F5
			float: left
			color: #333
			border-radius: 6px
			text-align: center
			font-size: 8px
			img
				height: 65%
				width: 80%
			p
				font-weight: 500
        padding-left: 0 .3px
 
.textCenter
  text-align: center
  color: #A39358
.activeNav
  border-left: 2px solid #B1A389
  color: #A39358
.tab-container
  height: 100%
  .float-left
    float: left  
  > ul
    text-align: center
    width: 20%
    height: 100%
    border-right: 2px solid #E7DBDD
    font-size: 14px
    font-weight: 400
    > li
      height: 2.5rem
      line-height: 2.5rem
  .tabCon
    width: 70%
    padding: 4.5%
    .containBox     
      img
        width: 100%

</style>